<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <style>
        div.buyPageDiv {
            margin: 20px auto;
            max-width: 1013px;
        }

        div.addressTip, div.productListTip {
            color: #333333;
            font-size: 16px;
            font-weight: bold;
            text-align: left;
            margin-bottom: 30px;
        }

        table.productListTable {
            width: 100%;
            border-collapse: separate;
            font-size: 12px;
        }

        table.productListTable th {
            color: #999999;
            font-family: 宋体;
            font-weight: normal;
            font-size: 12px;
            text-align: center;
            padding-bottom: 5px;
        }

        table.productListTable tr.rowborder td {
            background-color: #b2d1ff;
            border-right: 2px solid #fff;
            height: 3px;
        }

        th.productListTableFirstColumn {
            text-align: left !important;
        }

        img.tmallbuy {
            width: 15px;
        }

        a.marketLink {
            color: black;
            font-size: 12px;
            font-family: 宋体;
            font-weight: normal;
        }

        a.marketLink:hover {
            color: black;
            font-size: 12px;
            text-decoration: underline;
            font-family: 宋体;
            font-weight: normal;
        }

        span.wangwangGif {
            display: inline-block;
            width: 25px;
            height: 25px;
            background-image: url(http://how2j.cn/tmall/img/site/wangwang.gif);
            background-repeat: no-repeat;
            background-color: transparent;
            background-attachment: scroll;
            background-position: -83px -0px;
            position: relative;
            top: 8px;
            left: 2px;
        }

        tbody.productListTableTbody td {
            text-align: center;
        }

        tbody.productListTableTbody td.orderItemFirstTD {
            text-align: left;
        }

        tr.orderItemTR td {
            border-bottom: 1px solid #E5E5E5;
        }

        tr.orderItemTR td {
            padding: 10px 0px;
        }

        img.orderItemImg {
            width: 50px;
            height: 50px;
            border: 1px solid #E9E9E9;
        }

        td.orderItemProductInfo {
            text-align: left !important;
        }

        td.orderItemProductInfo img {
            height: 16px;
        }

        a.orderItemProductLink {
            color: #666666;
            display: block;
        }

        a.orderItemProductLink:hover {
            color: #666666;
            text-decoration: underline;
        }

        span.orderItemProductPrice, span.orderItemProductNumber {
            color: #000000;
        }

        span.orderItemUnitSum {
            color: #CC0000;
            font-weight: bold;
        }

        td.orderItemFirstTD, td.orderItemLastTD {
            border-bottom: 0px solid black !important;
        }

        label.orderItemDeliveryLabel {
            color: #666666;
            font-family: 宋体;
            font-size: 12px;
            font-weight: normal;
        }

        select.orderItemDeliverySelect {
            width: 100px;
            height: 23px;
        }

        div.orderItemSumDiv {
            padding: 20px;
            border-top: 2px solid #B4D0FF;
            background-color: #F2F6FF;
            height: 50px;
        }

        div.orderItemSumDiv span {
            color: #999999;
        }

        span.leaveMessageText {
            display: inline-block;
            margin-right: 10px;
            float: left;
        }

        div.orderItemTotalSumDiv {
            margin: 40px;
            height: 40px;
        }

        div.submitOrderDiv {
            height: 40px;
            margin: 20px 0px;
        }

        div.orderItemTotalSumDiv span {
            color: #999999;
        }

        span.orderItemTotalSumSpan {
            color: #C40000 !important;
            font-size: 22px;
            font-weight: bold;
            border-bottom: 1px dotted #F2F6FF;
        }

        button.submitOrderButton {
            border: 1px solid #C40000;
            background-color: #C40000;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            font-weight: 700;
            color: white;
            float: right;
            display: inline-block;
            margin: 0px 10px;
            width: 180px;
            height: 40px;
        }

        body {
            font-size: 12px;
            font-family: Arial;
        }
    </style>
</head>
<body>
<div class="buyPageDiv">
    <div class="productList">
        <div class="productListTip">订单支付</div>
        <table class="productListTable">
            <thead>
            <tr>
                <!--订单号-->
                <th class="productListTableFirstColumn" id="orderSn" colspan="2" th:text="${orderVO.orderSn}"></th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>配送方式</th>
            </tr>
            <tr class="rowborder">
                <td colspan="2"></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            </thead>
            <tbody class="productListTableTbody">
            <tr th:each="item : ${orderVO.items}">
                <td class="orderItemFirstTD">
                    <img width="20px" th:src="${item.getSkuPic()}" class="orderItemImg">
                </td>
                <td class="orderItemProductInfo">
                    <span th:text="${item.getTitle()}"></span>
                </td>
                <td>
                    <span class="orderItemProductPrice" th:text="'￥' + ${item.skuPrice}">￥3,514.05</span>
                </td>
                <td>
                    <span class="orderItemProductNumber" th:text="${item.skuQuantity}">2</span>
                </td>
                <td>
                    <span class="orderItemUnitSum" th:text="${item.getSubTotal()}">￥7,028.10</span>
                </td>
                <td class="orderItemLastTD" rowspan="5">
                    <label class="orderItemDeliveryLabel">
                        <input type="radio" checked="checked" value="">
                        普通配送
                    </label>
                    <select class="orderItemDeliverySelect">
                        <option>快递 免邮费</option>
                    </select>
                </td>
            </tr>
            </tbody>
        </table>

        <div class="orderItemSumDiv">
            <div class="pull-left">
                <span class="leaveMessageText">给卖家留言:</span>
                <span></span>
                <span class="leaveMessageTextareaSpan" style="display: none;">
					<textarea class="leaveMessageTextarea" name="userMessage"></textarea>
					<div>
                        <span>还可以输入200个字符</span>
                    </div>
				</span>
            </div>
            <span class="pull-right" th:text="'店铺合计(含运费): ￥' + ${orderVO.totalAmount}"></span>
        </div>
    </div>
    <div class="orderItemTotalSumDiv">
        <div class="pull-right">
            <span>实付款：</span>
            <span class="orderItemTotalSumSpan" th:text="${orderVO.totalAmount}">￥9,152.25</span>
        </div>
    </div>
    <div class="submitOrderDiv">
        <button class="submitOrderButton" type="button" onclick="toPay()">立即支付（暂不支持）</button>
    </div>
</div>
</body>
<script>
    function toPay() {

        alert("开发阶段，暂不支持支付!");
        const orderSn = document.getElementById("orderSn").value;

        // $.ajax({
        //     type: 'POST',
        //     datatype: 'json',
        //     url: 'http://localhost:88/api/order/pay/aliPayOrder',
        //     contentType: "application/json",
        //     data: {
        //         orderSn: orderSn
        //     }
        // });
    }

</script>
</html>
